import store from "./redux/store";
import React, { useState, useEffect } from 'react'
import { Provider } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { connect } from "./redux/blockchain/blockchainAction";
import { fetchData } from "./redux/data/dataAction";

export default function AccountBox(props) {
  return (
	  <Provider store={store}>
			<SignupForm />
	  </Provider>
  );
}

export function SignupForm(props) {
  const [inputID, setInputID] = useState("");
  const [claiming, setClaiming] = useState(false);
  const dispatch = useDispatch();
  const blockchain = useSelector((state) => state.blockchain);

  useEffect(() => {
    if (blockchain.account !== "" && blockchain.smartContract !== null) {
      dispatch(fetchData(blockchain.account));
    }
  }, [blockchain.smartContract, dispatch]);


const claimNFTs = (_amount) => {
    setClaiming(true);
    blockchain.smartContract.methods.mint(blockchain.account, _amount).send({
      from: blockchain.account,
      value: blockchain.web3.utils.toWei((0.02 * _amount).toString(), "ether"),
			// 這裡記得要傳入字串

    }).once("error", (err) => {
      setClaiming(false);
    }).then((receipt) => {
      setClaiming(false);
    })
  };




return (
    // <BoxContainer>
    <div>
      {blockchain.account === "" || blockchain.smartContract === null ? (
        // <SubmitButton1
        <div
          onClick={(e) => {
            e.preventDefault();
            dispatch(connect());
          }} >
          {"Connect!"}
        </div>
        // </SubmitButton1>
      ) : (
        // <SubmitButton1 disabled={claiming}
        <div disabled={claiming}
          onClick={(e) => {
            e.preventDefault();
            if(inputID === ""){
              claimNFTs(1);
            }
            else{
              claimNFTs(inputID);
            }
            
          }} >
          {claiming ? "Claiming" : "Mint!"}
        </div>
        // </SubmitButton1>
      )}
    </div>
    // </BoxContainer>
  );
}
